<template>
  <div class="merchart-chart yao-chart">
    <el-col :xs="24" :sm="24" :lg="12">
      <yao-bar-chart />
    </el-col>
    <el-col :xs="24" :sm="24" :lg="12">
      <yao-pie-chart />
    </el-col>
    <div class="merchart-chart yao-chart">
      <month-condition class="month-condition" @change="query" />
      <div ref="chart" :class="className" :style="{height:height,width:width}" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons')
import resize from '../../mixins/resize'

export default {
  components: {
    MonthCondition: () => import('./MonthCondition')
  },
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '350px'
    },
    autoResize: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      chart: null
    }
  },
  watch: {
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    query(monthDate) {
      const param = {
        monthDate
      }
      this.get('/medicine/getMedicineSaleTop10', param, { showLoading: false }).then(ret => {
        ret = [
          {
            'medicineName': '太极藿香口服液',
            'medicineCount': 114,
            'firstCategoryName': '感冒用药'
          },
          {
            'medicineName': '六味地黄丸',
            'medicineCount': 95,
            'firstCategoryName': '滋补调养'
          },
          {
            'medicineName': '三九感冒灵',
            'medicineCount': 32,
            'firstCategoryName': '感冒用药'
          },
          {
            'medicineName': '板蓝根颗粒',
            'medicineCount': 32,
            'firstCategoryName': '感冒用药'
          },
          {
            'medicineName': '百多邦消毒喷雾',
            'medicineCount': 23,
            'firstCategoryName': '护肤用品'
          },
          {
            'medicineName': '皮肤用药',
            'medicineCount': 12,
            'firstCategoryName': '滋补调养'
          },
          {
            'medicineName': '感冒药',
            'medicineCount': 12,
            'firstCategoryName': '滋补调养'
          },
          {
            'medicineName': '呼吸道用药',
            'medicineCount': 4,
            'firstCategoryName': '滋补调养'
          },
          {
            'medicineName': '芬必得',
            'medicineCount': 4,
            'firstCategoryName': '营养食品'
          },
          {
            'medicineName': '消食片',
            'medicineCount': 2,
            'firstCategoryName': '滋补调养'
          }
        ]
        new Set(ret.map(item => item.firstCategoryName)).forEach(item => {
          console.log('ddd', item)
        })
        this.chart.clear()
        const xAxisData = []
        const xAxisCateData = []
        const series = []
        let crtDtlIndex = 0
        let maxDtlIndex = 0
        ret.forEach(item => {
          maxDtlIndex += item.medicineCounts.length
        })
        ret.forEach(item => {
          const { firstCategoryName, medicineCounts, medicineNames } = item
          xAxisCateData.push(firstCategoryName)
          const seriesData = Array.from({ length: maxDtlIndex }, item => '')
          seriesData.splice(crtDtlIndex, medicineCounts.length, ...medicineCounts)
          series.push({
            name: firstCategoryName,
            type: 'bar',
            stack: 'a',
            data: seriesData
          })
          medicineNames.forEach((item, index) => {
            xAxisData.push(item)
            if (index > 0) {
              xAxisCateData.push('')
            }
            crtDtlIndex += 1
          })
        })
        this.setOptions({
          xAxisData,
          xAxisCateData,
          series
        })
      })
    },
    initChart() {
      this.chart = echarts.init(this.$refs.chart, 'macarons')
      this.setOptions()
    },
    setOptions({ xAxisData = [], xAxisCateData = [], series = [] } = {}) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: params => {
            const dataObj = params.find(item => item.name && item.data !== '')
            return dataObj.name + ':' + dataObj.data
          }
        },
        legend: {
          data: xAxisCateData,
          top: '16',
          orient: 'horizontal',
          type: 'scroll'
        },
        grid: {
          left: '55px',
          right: '80px',
          bottom: '3%',
          containLabel: true
        },
        title: {
          text: 'haha'
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisLabel: {
              rotate: 50,
              color: '',
              formatter: value => {
                const maxLen = 6
                if (value.length > maxLen) {
                  return value.substring(0, maxLen)
                }
                return value
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series
      })
    }
  }
}
</script>
<style lang="scss">
  .merchart-chart.yao-chart {
    .month-condition {
      right: 80px;
    }
  }
</style>
